<template>
  <div id="car">
    <div class="car-center">
      <div class="car-center-top">
        <span>购车</span>
      </div>
      <div class="car-center-tab">
        <van-tabs class="tabs">
          <van-tab title="新能源"></van-tab>
          <van-tab title="新车"></van-tab>
          <van-tab title="二手车"></van-tab>
          <van-tab title="低首付车"></van-tab>
        </van-tabs>
        <div class="gps">
          <select name="" id="">
            <option value="">成都</option>
            <option value="">德阳</option>
            <option value="">绵阳</option>
            <option value="">乐山</option>
            <option value="">宜宾</option>
            <option value="">达州</option>
            <option value="">眉山</option>
            <option value="">南充</option>
          </select>
        </div>
      </div>
      <div class="car-center-input">
        <van-search
          class="inp"
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
        />
      </div>
      <div class="car-center-serve">
        <van-grid class="grid">
          <van-grid-item icon="photo-o" text="排行榜" />
          <van-grid-item icon="photo-o" text="新车发布" />
          <van-grid-item icon="photo-o" text="购车优惠" />
          <van-grid-item icon="photo-o" text="旧车换新" />
          <van-grid-item icon="photo-o" text="条件优选" />
        </van-grid>
        <van-grid class="grid" :gutter="10" style="margin-top: 10px">
          <van-grid-item text="25-35万" />
          <van-grid-item text="35-50万" />
          <van-grid-item text="20-25万" />
          <van-grid-item text="100万以上" />
        </van-grid>
        <van-grid class="grid" :gutter="10" style="margin-top: 10px">
          <van-grid-item text="新能源" />
          <van-grid-item text="轿车" />
          <van-grid-item text="SUV" />
          <van-grid-item text="更多条件" />
        </van-grid>
      </div>
      <div class="car-center-indexes">
        <van-dropdown-menu>
          <router-link to="/car-list"
            ><van-dropdown-item v-model="value1" :options="option1"
          /></router-link>
          <van-dropdown-item v-model="value2" :options="option2" />
        </van-dropdown-menu>
      </div>
      <div class="car-center-swiper">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item
            ><img src="../assets/image/1.png" alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img src="../assets/image/1.png" alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img src="../assets/image/1.png" alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img src="../assets/image/1.png" alt=""
          /></van-swipe-item>
        </van-swipe>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";

export default {
  setup() {
    const value1 = ref(0);
    const value2 = ref("a");
    const option1 = [
      { text: "王朝系列", value: 0 },
      { text: "海洋系列", value: 1 },
    ];
    const option2 = [
      { text: "秦", value: "a" },
      { text: "唐", value: "b" },
      { text: "宋", value: "c" },
      { text: "元", value: "d" },
      { text: "清", value: "e" },
      { text: "汉", value: "f" },
    ];

    return {
      value1,
      value2,
      option1,
      option2,
    };
  },
};
</script>

<style lang="scss" src="../assets/css/car.scss" scoped></style>
